
import { Chat} from '@/types/chat'
import { useEffect, useState } from 'react'
import { AiOutlineEdit } from 'react-icons/ai'
import { MdCheck, MdClose, MdDeleteOutline } from 'react-icons/md'
import { PiChatBold, PiTrashBold } from 'react-icons/pi'


export default function ChatList() {
  
  const [ChatList, setChatList] = useState<Chat[]>([
    {
      id: '1',
      title: 'chat1',
      updateTime: Date.now()
    },
    {
      id: '2',
      title: 'chat2chat2chat2chat2chat2chat2',
      updateTime: Date.now()
    }
  ])
  const [selectedChat, setSelectedChat] = useState<Chat>()
  const [editing, setEditing] = useState(false)
  const [deleting, setDeleting] = useState(false)
  useEffect(() => {
    setEditing(false)
  },[selectedChat])
    return <div className='flex-1 mt-2 flex flex-col'>
      <ul>
        {
          ChatList.map((chat) => {
            return <li 
            onClick={() => {
              setSelectedChat(chat)
            }}
            key={chat.id} className={`relative flex items-center p-3 space-x-3 cursor-pointer rounded-md hover:bg-gray-800
             ${selectedChat?.id === chat.id ? "bg-gray-800 pr-[3.5em]" : ""}
            `}>
              <div> {deleting ? <PiTrashBold /> : <PiChatBold />}</div>
              {
                editing && selectedChat?.id === chat.id? <input type="text" autoFocus defaultValue={chat.title} className='min-w-0 flex-1 bg-transparent outline-none' /> : 
                <div className='relative flex-1 whitespace-nowrap overflow-hidden text-ellipsis'>
                  {chat.title}
                  <span className='absolute right-0 insert-y-0 w-8 from-gray-900 bg-gradient-to-l'></span>
                </div>
              }
              
              {selectedChat?.id === chat.id && <div className='absolute right-1 flex'>
                 {
                   (editing || deleting) ? <>
                      <button className='p-1 hover:text-white'
                        onClick={(e) => {
                          setEditing(false)
                          setDeleting(false)

                          e.stopPropagation()
                        }}
                      >
                        <MdCheck />
                      </button>
                      <button className='p-1 hover:text-red'
                        onClick={(e) => {
                          setEditing(false)
                          setDeleting(false)

                          e.stopPropagation()
                        }}
                      >
                        <MdClose />
                      </button>
                   </> : <>
                      <button className='p-1 hover:text-white'
                          onClick={(e) => {
                            setEditing(true)
                            e.stopPropagation()
                          }}
                        >
                          <AiOutlineEdit />
                        </button>
                        <button className='p-1 hover:text-red'
                          onClick={(e) => {
                            setDeleting(true)
                            e.stopPropagation()
                          }}
                        >
                          <MdDeleteOutline />
                        </button>
                   </>
                 }
              </div>}

            </li>
          })
        }
      </ul>
    </div>
}